<template>
    <div class="home-container">
        <h3>home组件</h3>
        <!-- <router-link :to="{name:'MovieDetails',params:{id:3}}">跳转MovieDetails组件</router-link> -->
         <a href="#" @click.prevent="gotoMovie(3)">跳转MovieDetails组件</a>
    </div>
</template>

<style scoped>
    .home-container {
        min-height: 150px;
        background-color: #f2f2f2;
        padding: 15px;
    }
</style>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const gotoMovie = (id) => {
    // router.push({name:'MovieDetails',params:{id:id}});
    router.replace({name:'MovieDetails',params:{id:id}});
}
</script>